<script setup lang="ts">
import i18n from '@renderer/assets/i18n'
import { useSystemSettingStore } from '@renderer/store/pinia/systemSetting'
import { themeMap } from '@renderer/config/appSet'


const store = useSystemSettingStore()


const handleLanguageChange = (val) => {
  (i18n as any).locale = val
}

const handleThemeChange = (val) => {
  const colorMap = themeMap[val]
  const root: any = document.querySelector(':root')
  for (const [key, val] of Object.entries(colorMap)) {
    root.style.setProperty(key, val)
  }
}

const handleFontSizeChange = (val) => {
  document.documentElement.style.fontSize = val + 'px'
}

</script>

<template>
  <div class="w-full h-full">
    <el-form :model="store.systemSetting" label-width="auto" style="max-width: 600px">
      <el-form-item label="language">
        <el-radio-group v-model="store.systemSetting.language" @change="handleLanguageChange">
          <el-radio value="en">English</el-radio>
          <el-radio value="cn">中文</el-radio>
          <el-radio value="ja">日文</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="theme">
        <el-radio-group v-model="store.systemSetting.theme" @change="handleThemeChange">
          <el-radio value="default">default</el-radio>
          <el-radio value="theme1">Theme1</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="fontSize">
        <el-slider v-model="store.systemSetting.fontSize"
                   :min="12"
                   :max="20"
                   show-input size="large"
                   @change="handleFontSizeChange" />
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>

</style>
